<template>
  <div class="rx-layout-header">
    <div class="rx-layout-header-left">
      <div
        class="b-rd-4 p-8 transition-all-300 hover:cursor-pointer hover:bg-black:10"
        @click="collapseMenu"
      >
        <div class="i-tdesign:view-list font-size-18"></div>
      </div>
    </div>
    <div class="rx-layout-header-right">
      <t-select
        filterable
        placeholder="搜索"
        v-model="searchPath"
        :options="searchQukePathOption"
        @change="searchQukePath"
      >
        <template #label>
          <div class="i-tdesign:search"></div>
        </template>
      </t-select>
      <t-dropdown trigger="click" placement="bottom" @click="clickHandler">
        <div class="flex gap-12 flex-items-center hover:cursor-pointer">
          <img :src="avatar" v-if="avatar" class="h-40px w-40px" />
          <div>{{ userStore.userinfo_getter.user?.userName || '个人中心' }}</div>
          <t-icon name="chevron-down" size="16" />
        </div>
        <t-dropdown-menu>
          <t-dropdown-item value="个人中心" content="个人中心">
            <template #prefix-icon>
              <div class="i-tdesign:user-circle"></div>
            </template>
          </t-dropdown-item>
          <t-dropdown-item value="退出登录" content="退出登录">
            <template #prefix-icon>
              <div class="i-tdesign:poweroff"></div>
            </template>
          </t-dropdown-item>
        </t-dropdown-menu>
      </t-dropdown>
    </div>
  </div>
</template>
<script setup lang="ts">
import { MessagePlugin } from 'tdesign-vue-next';
import { useUserStore } from '@/store/modules/user.ts';
const router = useRouter();
const route = useRoute();
interface IProps {
  collapsed?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
  collapsed: true,
});
const emits = defineEmits(['update:collapsed']);

const collapseMenu = () => {
  emits('update:collapsed', !props.collapsed);
  console.log(props.collapsed);
};

/**
 * ====================路由选项搜索跳转===================
 */
const searchPath = ref('');
const searchQukePathOption = ref<any[]>([]);
router.getRoutes().map((route) => {
  if (route.meta.title) {
    searchQukePathOption.value.push({
      label: `${route.meta.title} -> ${route.path}`,
      value: route.name,
    });
  }
});
const searchQukePath = (e: any) => {
  searchPath.value = '';
  router.push({ name: e });
};
/**
 * ======================================================
 */

// 选中的下拉菜单中的某个选项
const userStore = useUserStore();
const avatar = __APP_ENV__.VITE_APP_API + userStore.userinfo_getter.user?.avatar;
const clickHandler = (data: any) => {
  if (data.content === '退出登录') {
    userStore.LogOut().then(() => {
      router.replace(`/login?redirect=${encodeURIComponent(route.fullPath)}`);
      MessagePlugin.success(`退出成功`);
    });
  } else if (data.content === '个人中心') {
    // todo 这个后面完善一下
  }
};
</script>
